<template>
  <ul class="homeCategories">
    <li v-for="item in categories" :key="item.id">
      <img :src="item.pictureUrl" alt="">
      <h3>{{ item.title }}</h3>
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useHomeStore } from '@/stores/home.js'
import { storeToRefs } from 'pinia'


// 获取仓库实例
const homeStore = useHomeStore()
// 请求
homeStore.fetchHomeCategories()
// 解构出
const { categories } = storeToRefs(homeStore)
console.log('c', categories);

</script>

<style scoped lang="less">
.homeCategories {
  display: flex;
  // 溢出滚动
  overflow-y: auto;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  li {
    text-align: center;

    img {
      width: 32px;
      height: 32px;
    }

    h3 {
      width: 80px;
      font-size: 14px;
      font-weight: normal;
    }
  }

}
</style>
